<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Yach, yet another checklist</title>
    <meta name="description" content="Checklist application">
    <meta name="author" content="Renat Nasyrov">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link rel="stylesheet" href="static/css/bootstrap/bootstrap.css">
    <style type="text/css">
        body {
            padding-top: 60px;
        }
    </style>

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script src="static/js/bootstrap-modal.js"></script>

</head>

<body>

<div class="topbar">
    <div class="topbar-inner">
        <div class="container-fluid">
            <a class="brand" href="#">Yach</a>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="sidebar" style="height: 100%!important;">
        <div class="well">
            <h5>Yours Checklists</h5>
            <ul>
                <li><a href="#">Буднее утро</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <button class="btn primary" data-controls-modal="add-checklist-dialog" data-backdrop="static">Add</button>

            <div id="add-checklist-dialog" class="modal hide fade">
                <div class="modal-header">
                    <a href="#" class="close">&times;</a>
                    <h3>Add Checklist</h3>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="clearfix">
                            <label for="checklistName">Title</label>
                            <div class="input">
                                <input id="checklistName" type="text" size="32"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn primary">Save</a>
                    <a href="#" id="btnCancel" class="btn secondary" onclick="$('#')>Cancel</a>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <form>
            <table class="zebra-striped">

                <tr>
                    <td width="1%">
                        <input type="checkbox"/>
                    </td>
                    <td>
                        Item
                    </td>
                </tr>
            </table>
        </form>

    </div>
</div>

</body>


</html>